import React, { useRef, useState, useEffect } from "react";
import { Empty, Spin } from "antd";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import { discover, NewFileMetadata, updateFileMetadata, deleteFileMetadata } from "../../services/graphql";
import * as oss from "../../services/oss";
import { formatPicUrl } from "../../utils/formatter";
import store from "../../utils/store";

function Main({ className }) {
	const navigate = useNavigate();
	const [list, setList] = useState();
	const [isLoading, setIsLoading] = useState(false);

	const init = async () => {
		setIsLoading(true);
		let list2 = [
			{
				cat: "Videos",
				filter: "video",
				filterInt: 2,
				link: "/list/2",
				arr: []
			},
			{
				cat: "Musics",
				filter: "music",
				filterInt: 7,
				link: "/list/7",
				arr: []
			},
			{
				cat: "Applications",
				filter: "application",
				filterInt: 1,
				link: "/list/1",
				arr: []
			}
		];
		for (let item of list2) {
			let params = {
				filter: item.filterInt,
				pageindex: 1,
				pagesize: 5
			};
			let ret = await discover(params);
			if (ret.msg == "ok" && ret.data) {
				item.arr = ret.data;
			}
		}
		setList(list2);
		setIsLoading(false);
		//query banlce and space
		if (store.get("account")) {
			await oss.queryBalance();
			if (window.refreshSpace) {
				window.refreshSpace();
			} else {
				oss.territories();
			}
		}
	};
	useEffect(() => {
		// let acc = getAccount();
		// if (!acc) {
		// 	return navigate('/login');
		// }
		init();
	}, []);
	return (
		<div className={className}>
			<Spin spinning={isLoading}>
				<div className="banner">
					<div className="b-left">
						<div className="bg"></div>
					</div>
					<div className="b-middle">Invite friends to share files</div>
					<div className="b-right"></div>
				</div>
				<div className="content">
					{list &&
						list.map((item, index) => {
							return (
								<div className="box" key={index}>
									<div className="title-line">
										<div className="title">{item.cat}</div>
										<div className="more" onClick={() => navigate(item.link)}>
											more
										</div>
									</div>
									<div className="list">
										{item.arr.map((t, i) => {
											return (
												<div className="item" key={i} onClick={() => navigate("/detail/" + t.fid)}>
													<div className="pic-box">
														<img src={t.pic} />
													</div>
													<div className="title">{t.title}</div>
												</div>
											);
										})}
										{item.arr.length == 0 ? <Empty /> : ""}
									</div>
								</div>
							);
						})}
					{!list ? <Empty /> : ""}
				</div>
			</Spin>
		</div>
	);
}

export default styled(Main)`
	display: block;
	.banner {
		background-color: #000;
		width: 100%;
		height: 250px;
		overflow: hidden;
		display: block;
		position: relative;
		top: 0;
		.b-left {
			position: absolute;
			top: 0;
			left: 0;
			width: 30%;
			background-image: url(/img/banner-left.svg);
			background-repeat: no-repeat;
			background-size: cover;
			z-index: 1;
			height: 250px;
			display: block;
			overflow: hidden;
			.bg {
				width: 60%;
				height: 250px;
				display: block;
				overflow: hidden;
				float: right;
				background-image: linear-gradient(to right, #ff000000, black);
			}
		}
		.b-middle {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 250px;
			line-height: 250px;
			text-align: center;
			font-size: 36px;
			font-weight: bold;
			color: #fff;
			z-index: 3;
		}
		.b-right {
			z-index: 2;
			position: absolute;
			top: 0;
			right: 0;
			height: 250px;
			display: block;
			overflow: hidden;
			width: 30%;
			background-image: url(/img/banner-right.svg);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
	.content {
		width: 888px;
		padding: 20px;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		.box {
			width: 100%;
			clear: both;
			margin-bottom: 39px;
			display: block;
			.title-line {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 10px;
				.title {
					font-size: 28px;
					font-weight: bold;
					height: 30px;
					line-height: 30px;
				}
				.more {
					width: 70px;
					height: 30px;
					line-height: 30px;
					display: block;
					overflow: hidden;
					border-radius: 4px;
					background-color: rgba(51, 51, 51, 1);
					color: #fff;
					cursor: pointer;
					text-align: center;
				}
				.more:hover {
					background-color: rgb(85 84 84);
				}
			}
			.list {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-around;
				.item {
					width: 16%;
					cursor: pointer;
					.pic-box {
						width: 100%;
						height: 220px;
						overflow: hidden;
						background-color: #000;
						display: flex;
						justify-content: center;
						align-items:center;
						img {
							width: 100%;
							height: 220px;
						}
					}
					.title {
						font-size: 13px;
						color: #333333;
						line-height: 18px;
						height: 54px;
						overflow: hidden;
						display: block;
					}
				}
			}
		}
	}
`;
